<template>
  <div id="deviceStatusCharts" style="width:100%;height:100%"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'device-status-charts',
  data() {
    return {
      myChart: null,
    }
  },
  methods: {
    resize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    loadRes() {
      // 初始化 echarts 对象
      const myChart = echarts.init(document.getElementById('deviceStatusCharts'))
      // 定义饼图配置项
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: 30,
          right: 0,
          top: 30,
          bottom: 20
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '80%'],
            labelLine: {
              show: false
            },
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              disable: false,
              scale: false,
              scaleSize: 0,
            },
            itemStyle: {
              normal: {
                color(params) {
                  const colorList = [
                    ['#0971ee','#1047df'],
                    ['#246ba1','#033967']
                  ]; 
                  // 自定义渐变色列表
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {offset: 0, color: colorList[params.dataIndex][0] }, 
                    {offset: 1, color: colorList[params.dataIndex][1] }
                  ])
                },
                borderRadius: 4,
                borderColor: '#02102a',
                borderWidth: 1,
              }
            },
            data: [
              { value: 41, name: '在线' },
              { value: 20, name: '离线' },
            ]
          }
        ]
      }
      // 将配置项应用于图表上
      myChart.setOption(option)
      this.myChart = myChart
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize.bind(this))
  },
  mounted() {
    this.$nextTick(() => {
      this.loadRes()
      window.addEventListener('resize', this.resize.bind(this))
    })
  }
}
</script>